<template>
  <base-breadcrumb>
    <searchData
      :search-data="searchArr"
      @search="search"
    />
    
    <a-card :bordered="false">
      <div class="table-operator">
        <div class="pub-table-action-btn">
          <a-button
            v-btnPermission="'crm_004_add_01'"
            type="primary"
            icon="plus"
            @click="handleEdit(null, 1)"
          >
            新增维保日志
          </a-button>
        </div>
      </div>
      <list-table
        ref="table"
        :loading="loading"
        :pagination="false"
        :request="loadData"
        :columns="columns"
        row-key="id"
      >
        <template
          slot="logstatus"
          slot-scope="text, record"
        >
          <list-status
            :color="{0: 'yellow', 1: 'green'}[record.status]"
            conversion="en"
            :text="text"
          />
        </template>
        <div
          slot="operation"
          slot-scope="text, record"
          class="pub-table-list-action"
        >
          <MoreButton>
            <a
              v-btnPermission="'crm_004_loo_02'"
              @click="handleEdit(record, 3)"
            >查看</a>
            <a
              v-if="record.status == 0"
              v-btnPermission="'crm_004_edi_03'"
              @click="() => handleEdit(record, 2)"
            >编辑</a>
            <a
              v-if="record.status == 0"
              v-btnPermission="'crm_001_rev_06'"
              @click="() => handleDel(record.id)"
            >删除</a>
          </MoreButton>
        </div>
      </list-table>

    </a-card>
  </base-breadcrumb>
</template>
<script>
import { customerComplaintCancel } from '@/api/complaint'
import { getPageCustomerMaintenanceLog, deleteByPrimaryKey } from '@/api/complaint/maintenancelog'
import SelectProject from '@/components/Select/SelectProject' // 项目
import SelectSubCompany from '@/components/Select/SelectSubCompany'
import OrgTreeSelect from '@/components/OrgTreeSelect'
import listStatus from '@/components/list_status/list_status'

export default {
  name: 'a' + Date.now(),
   components: {
    listStatus,
  },
  data: function () {
    return {
      loading: false,
      pathName: this.$route.path,
      queryParam: {},
      infoQueryParam: {},
      pageNo: 1,
      pageSize: 10,
      totalSize: 0,
      searchArr: [
      {
        name: '所属单位',
        valueKey: 'searchQuery',
        type: OrgTreeSelect,
      },
        // {
        //   name: '所属分公司',
        //   valueKey: 'branchComId',
        //   type: SelectSubCompany
        // },
        // {
        //   name: '项目名称',
        //   type: SelectProject,
        //   keyValue: 'branchComId',
        //   valueKey: 'projectId'
        // },
        {
          name: '维保单编号',
          value: 'maintenanceCode',
          type: 'input'
        },
        {
          name: '维保方案编号',
          value: 'planCode',
          type: 'input'
        },
        {
          name: '日志日期',
          value: 'createTime',
          type: 'dateRange',
          attr: {
            rangeFormat: ['startTime', 'endTime']
          }
        },
        {
          name: '状态',
          value: 'status',
          type: 'select',
          data: [
            {
              value: '',
              label: '全部'
            },
            {
              value: '0',
              label: '草稿'
            },
            {
              value: '1',
              label: '已确认'
            }
          ]
        }
      ],
      columns: [
        {
          title: '日志编号',
          dataIndex: 'code',
          width: 220
        },
        {
          title: '分公司',
          dataIndex: 'branchComName',
          width: 160
        },
        {
          title: '项目名称',
          dataIndex: 'projectName',
          width: 220
        },
        {
          title: '维保方案编号',
          dataIndex: 'planCode',
          width: 160
        },
        {
          title: '维保单编号',
          dataIndex: 'maintenanceCode',
          width: 160
        },
        {
          title: '日志日期',
          dataIndex: 'createTime',
          width: 160
        },
        {
          title: '状态',
          width: 160,
          dataIndex: 'statusName',
          scopedSlots: { customRender: 'logstatus' }
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: 200,
          fixed: 'right',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      selectedRowKeys: [],
      selectId: [],
      selectedRows: [],
      chooseData: 0,
      tableData: [],
      projectData: [],
      loadData: (parameter) => {
          let that = this
          parameter.pageNum = parameter.pageNo;
          delete parameter.pageNo;
          this.loading = true;
          const requestParameters = Object.assign({}, parameter, { param: that.queryParam })
          return getPageCustomerMaintenanceLog(requestParameters).then((res) => {
             let list = res.data?.list;
             this.loading = false;
             return { code: 200, data: list, totalSize: res.data?.total }
          })
        },
    }
  },
  created(){
  },
  mounted: function () {
    this.$bus.$on('handleRefresh' + this.pathName, () => {
    this.$refs.table.refresh()
    })
  },
  beforeDestroy () {
    this.$bus.$off('handleRefresh' + this.pathName)
  },
  methods: {
    search(val) {
      this.queryParam = { ...val }
      this.$refs.table.refresh()
    },
    handleDel (id) {
      let that = this
      that.$confirm({
        title: '温馨提示',
        content: '是否确认删除?',
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk () {
          return deleteByPrimaryKey({ id: id })
            .then((res) => {
              that.$message.success('删除成功！')
              that.list()
              that.$refs.table.refresh(true)
            }).catch(err => {
              console.log(err)
            })
        }
      })
    },

    handleEdit (record, state) {
      this.$router.push({
        name: 'AddMaintenanceLog',
        query: {
          id: record && record.id || '',
          state: state
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.ant-modal {
  width: 900px !important;
}
</style>
